<div class="alert alert-danger alert-custom colorRed" role="alert" data-bind="visible: isChargingExpired() || batteryTemperatureLevel() != '0'">
    <div data-bind="visible: isChargingExpired" data-trans="battery_charging_expired"></div>
    <div data-bind="visible: batteryTemperatureLevel() == '1'" data-trans="battery_temperature_level_1"></div>
    <div data-bind="visible: batteryTemperatureLevel() == '2'" data-trans="battery_temperature_level_2"></div>
    <div data-bind="visible: batteryTemperatureLevel() == '3'" data-trans="battery_temperature_level_3"></div>
</div>
<div class="page-title">
    <img src="svg_img/home_black.svg">
    <h1 data-trans="Home" style="font-wight:700;"></h1>
</div>
<!-- <div class="row" id="home_image" style="min-width:1350px"> -->
<div id="home_image">
    <div id="homeContainer1" >
        <div id="homeStatusContainer">
            <div id="connect-line-1" data-bind="visible: cpeMode != 'MULTIWAN' "></div>
            <div id="connect-line-2"></div>
            <div id="connect-line-3" data-bind="visible: cpeMode == 'MULTIWAN' "></div>
            <div class="row">
                <div class="col-md-4 col-lg-4 d-md-block  d-flex phone_cl">
                    <div class="home-img-div">
                        <a data-bind="attr: {'href': isCableMode() ? '#wired_network' : '#mobile_network'} , visible: cpeMode != 'MULTIWAN'" >
                            <div class="home-bg">
                                <div class="connected-gif" data-bind="visible: cStatus()== 1 && isShowHomeConnect()"></div>
                                <img data-bind="attr: {'src': networkImge}" src="svg_img/signal_4_bg.svg" alt="" />
                            </div>
                        </a>
                        <div data-bind="visible: cpeMode == 'MULTIWAN' ">
                            <div class="hybrid_bg">
                                <div class="connected-gif hybrid-connected-gif" data-bind="visible: cStatus()== 1 && isShowHomeConnect()"></div>
                                <a href="#mobile_network">
                                    <img id="mobile-img" data-bind="attr: {'src': networkImge}" src="svg_img/signal_4_bg.svg" alt="" />
                                </a>
                                <a href="#wired_network">
                                    <img id="wired-img" data-bind="attr: {'src': cableNetworkImge}" src="svg_img/network_big.svg" alt="" />
                                </a>
                            </div>
                        </div>
                        <div class="center-title">
                            <h6 data-trans="Network"></h6>
                        </div>
                    </div>

                    <div class="home_1_top row" data-bind="visible: cpeMode != 'MULTIWAN' ">
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6" style="height:auto;">
                            <div class="top_data_1">
                                <label data-trans="network"></label>
                            </div>
                            <div class="top_data_2">
                                <span  data-bind="text: networkType"></span>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6" style="height:auto;">
                            <div class="top_data_1">
                                <label data-trans="connection"></label>
                            </div>
                            <div class="top_data_2 ms-neg-12"  data-bind="visible: isShowHomeConnect()">
                                <span class="form-switch">
                                    <input class="form-check-input mt-0" type="checkbox" name="connectBtn" id="h_connect_btn2" data-bind="visible: canConnect() && isShowHomeConnect(), click: connectHandler, checked : cStatus()== 1">
                                </span>
                                <span data-bind="text: connected_Time ,visible: cStatus()== 1" style="display:inline"></span>
                            </div>
                            <div class="top_data_2"  data-bind="visible: !isShowHomeConnect()" style="margin-top:-5px;">
                                <span  data-bind="attr: {'data-trans': cableCstatus}"></span>
                            </div>
                        </div>

                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1 mt-3">
                                <label data-trans="Upload_rate"></label>
                            </div>
                            <div class="top_data_2 sped">
                                <img src="./svg_img/up_rate_home.svg" />
                                <span data-bind="text: up_Speed ,visible: cStatus() == '1'"></span>
                                <span data-bind="visible: cStatus() != '1'"> -- Kb/s</span>
                            </div>
                        </div>
                
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1 mt-3">
                                <label data-trans="Download_rate"></label>
                            </div>
                            <div class="top_data_2 sped">
                                <img src="./svg_img/down_rate_home.svg" />
                                <span data-bind="text: down_Speed ,visible: cStatus() == '1'"></span>
                                <span data-bind="visible: cStatus() != '1'"> -- Kb/s</span>
                            </div>
                        </div>
                    </div>

                    <div class="home_1_top row" data-bind="visible: cpeMode == 'MULTIWAN' ">
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1">
                                <label data-trans="mobile"></label>
                            </div>
                            <div class="top_data_2 height-40">
                                <span  data-bind="text: networkType , visible: simStatusText() == 'sim_status_modem_init_complete'" ></span>
                                <span  id="simStatusText" data-bind="attr:{'data-trans':simStatusText}, visible: simStatusText() != 'sim_status_modem_init_complete'"style="color : #FF4D4F;"></span>
                                <a href="#pin_management" style="margin-left: 6px;" data-bind="visible: shouUnlockImg "><img src="./svg_img/ic_lock_home.svg" ></a>
                                <a style="margin-top: -6px; margin-left: 8px;" href="javascript: void(0)" 
                                id="h_connect_btn" 
                                data-bind="visible: canConnect() && isShowHomeConnect(), click: connectHandler , css: {'h_connect_on': cStatus()== 1, 'h_connect_off': cStatus() != 1}"></a>
                            </div>
                            <div class="top_data_2 sped">
                                <img src="./svg_img/up_rate_home.svg" />
                                <span data-bind="text: up_Speed ,visible: cStatus() == '1'"></span>
                                <span data-bind="visible: cStatus() != '1'"> -- Kb/s</span>
                            </div>
                            <div class="top_data_2 mt-2 sped">
                                <img src="./svg_img/down_rate_home.svg"  />
                                <span data-bind="text: down_Speed ,visible: cStatus() == '1'"></span>
                                <span data-bind="visible: cStatus() != '1'"> -- Kb/s</span>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1">
                                <label data-trans="wired"></label>
                            </div>
                            <div class="top_data_2 height-40">
                                <span  data-bind="text: wan1ModeText"></span>
                                <!-- <span  data-bind="attr: {'data-trans': multiWancStatus}"></span> -->
                                <img height="22" data-bind="visible: multiWancStatus() == '1'" src="./svg_img/connect_done.svg" />
                                <img height="22" data-bind="visible: multiWancStatus() != '1'" src="./svg_img/disconnect.svg" />
                            </div>
                            <div class="top_data_2 sped" >
                                <img src="./svg_img/up_rate_home.svg" />
                                <span data-bind="text: lan1_down_Speed ,visible: multiWancStatus() == '1'"></span>
                                <span data-bind="visible: multiWancStatus() != '1'"> -- Kb/s</span>
                            </div>
                            <div class="top_data_2 mt-2 sped"  data-bind="">
                                <img src="./svg_img/down_rate_home.svg" />
                                <span data-bind="text:  lan1_up_Speed ,visible: multiWancStatus() == '1'"></span>
                                <span data-bind="visible: multiWancStatus() != '1'"> -- Kb/s</span>
                            </div>
                        </div>
                    </div>

                </div>
                

                <div class="col-md-4 col-lg-4 d-md-block  d-flex phone_cl">
                    <div class="home-img-div">
                        <a href="#wifi_main_ssid">
                            <div class="home-bg position-relative">
                                <img id="dfsSearchingImg" src="img/icon_SearchingRadar.gif" alt="" data-bind="visible: wifi_dfs_status() == '2' || wifi_dfs_status() == '3' ">
                                <img src="svg_img/router_wifi_big.svg" data-bind="attr: {'src': wifiImge} "   alt="" /> 
								<!-- <img id="batteryImg" data-bind="attr: {src: batteryPers},visible: hasBattery">
								<label id="batteryVal" data-bind="text: batteryLevel"></label> -->
                            </div>
                        </a>
                        <div class="center-title">
                            <h6 data-trans="wifi"></h6>
                        </div>
                    </div>

                    <div class="home_1_top row" style="position: sticky;" data-bind="css:{'height-less-sm-150': bandSteeringEnabled()}">
                            <span class="span-pass-icon"></span>
                            <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                                <div class="top_data_1" data-bind="visible: !bandSteeringEnabled()">
                                    <label data-trans="wifi"></label>
                                </div>
                                <div class="top_data_1" data-bind="visible: bandSteeringEnabled()">
                                    <label data-trans="wifi"></label>
                                </div>
                                <div class="top_data_2 text-ellipsis">
                                    <span class="tooltip-origin" dir="ltr" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-placement="top" data-bind="text: ssid, attr: {'data-bs-original-title': ssid}"></span>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                                <div class="top_data_1">
                                    <label data-trans="password"></label>
                                </div>
                                <div class="top_data_2 text-ellipsis">
                                    <span class="tooltip-origin tooltip-origin-pass home-wifi" dir="ltr" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-placement="top" data-bind="text: wifiPass, attr: {'data-bs-original-title': wifiPass}"></span>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                                <div class="top_data_1">
                                    <label data-trans="wireless_devices"></label>
                                </div>
                                <div class="top_data_2">
                                    <span data-bind="text: wirelessDeviceNum">0</span>
                                    <label data-trans="device_unit">devices</lable>
                                </div>
                            </div>
                            <!-- <div class="col-12 col-sm-6 col-md-12 col-xl-6" data-bind="visible: !bandSteeringEnabled()">
                                <div class="top_data_1 mt-3">
                                    <label data-trans="5G_wifi"></label>
                                </div>
                                <div class="top_data_2 text-ellipsis">
                                    <span class="tooltip-origin" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-placement="top" data-bind="text: ssid_5g, attr: {'data-bs-original-title': ssid_5g}"></span>
                                </div>
                            </div>
                      
                            <div class="col-12 col-sm-6 col-md-12 col-xl-6" data-bind="visible: !bandSteeringEnabled()">
                                <div class="top_data_1 mt-3">
                                    <label data-trans="password"></label>
                                </div>
                                <div class="top_data_2 text-ellipsis">
                                    <span class="tooltip-origin" data-bs-toggle="tooltip" data-bs-custom-class="custom-tooltip" data-bs-placement="top" data-bind="text: wifiPass_5g, attr: {'data-bs-original-title': wifiPass_5g}"></span>
                                </div>
                            </div> -->

                    </div>

                </div>
              
                <div class="col-md-4 col-lg-4 d-md-block  d-flex phone_cl">
                    <div class="home-img-div position-relative">
                            <div class="home_device_data">
                                <!-- 原有的设备信息展示区域被注释掉 -->
                                <!-- 
                                <div id="h_wire_device" data-bind="visible: isCPE">
                                    <span data-bind="text: wireDeviceNum">0</span>
                                </div>
                                <div id="h_wireless_device" style="width: 22px;text-align: center;">
                                    <span data-bind="text: wirelessDeviceNum">3</span>
                                </div>
                                -->
                            </div>
                        <div class="center-title">
                            <h6 data-trans="system_status"></h6>
                        </div>
                    </div>
                    <div class="home_1_top row">
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1">
                                <label data-trans="cpu_usage"></label>
                            </div>
                            <div class="top_data_2">
                                <span id="cpuUsage">0.00%</span>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1">
                                <label data-trans="memory_usage"></label>
                            </div>
                            <div class="top_data_2">
                                <span id="memUsage">0.00%</span>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1">
                                <label data-trans="max_temperature"></label>
                            </div>
                            <div class="top_data_2">
                                <span id="maxTemp">0.00°C</span>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-12 col-xl-6">
                            <div class="top_data_1">
                                <label data-trans="battery_level"></label>
                            </div>
                            <div class="top_data_2">
                                <span id="batteryLevel">0%</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <script>
                $(document).ready(function() {
                    // 获取设备状态信息
                    function getDeviceStatus() {
                        return $.get("/atwat/sysinfo").then(function(data) {
                            return data;
                        });
                    }
                
                    // 更新设备状态信息
                    function updateDeviceStatus() {
                        getDeviceStatus().then(function(status) {
                            if (status) {
                                // 更新CPU负载
                                $("#cpuUsage").text(status.CPUusage.toFixed(2) + "%");
                                // 更新内存占用
                                $("#memUsage").text(status.MEMusage.toFixed(2) + "%");
                                // 更新最高温度
                                $("#maxTemp").text(status.MAXtemp.toFixed(2) + "°C");
                                // 更新电量
                                $("#batteryLevel").text(status.Battery + "%");
                            }
                        }).fail(function() {
                            console.error("获取设备状态失败");
                        });
                    }
                
                    // 初始化页面并每秒更新一次设备状态信息
                    updateDeviceStatus();
                    setInterval(updateDeviceStatus, 1000);
                });
                </script>
                
            
            </div>

        </div>

    </div>

    <div class="row" style="margin-top:24px;">
        <div class="col-12 col-md-12 col-xl-6">
            <div id="homeContainer2">
                <div class="form-title margin-bottom-20">
                    <h6 data-trans="features"></h6>
                </div>
                <div id="22" class="bottom_left row">
                    <div class="col-12 col-sm-6 col-xl-12 col-xxxl-6">
                        <div class="FeaturesContainer" style="background: rgba(64,199,214,0.12);">
                            <a href="#nfc_setting">
                                <div class="row bottom_left_1">
                                    <div class="col-10">
                                        <label class="top_data_11 center-block margin-top-5 icon-content-3" data-trans="nfc_settings"></label>
                                    </div>
                                    <div class="col-2" style="margin-left:-16px">
                                        <img src="img/ic_nfc_home.png?v=1736213398713" alt="" />
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6 col-xl-12 col-xxxl-6">
                        <div class="FeaturesContainer" style="background: rgba(64,199,214,0.12);">
                            <a href="#diagnosis">
                                <div class="row bottom_left_1">
                                    <div class="col-10">
                                        <label class="top_data_11 center-block margin-top-5 icon-content-4" data-trans="diagnosis">Diagnosis</label>
                                    </div>
                                    <div class="col-2" style="margin-left:-16px">
                                        <img src="svg_img/network_diagnosis.svg" alt="" style="filter: invert(69%) sepia(83%) saturate(365%) hue-rotate(136deg) brightness(88%) contrast(89%);height:40px;">
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-xl-12 col-xxxl-6">
                        <div class="FeaturesContainer" style="background: rgba(64,199,214,0.12);">
                            <a href="/iptables">
                                <div class="row bottom_left_1">
                                    <div class="col-10">
                                        <label class="top_data_11 center-block margin-top-5 icon-content-4">防火墙(v4)</label>
                                    </div>
                                    <div class="col-2" style="margin-left:-16px">
                                        <img src="svg_img/network_iptables.svg" alt="" style="filter: invert(69%) sepia(83%) saturate(365%) hue-rotate(136deg) brightness(88%) contrast(89%);height:40px;">
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div id="3" class="col-12 col-md-12 col-xl-6">
            <div id="homeContainer3" >
                <div class="row form-title col-12 margin-bottom-20">
                    <div class="col-6">
                        <h6 data-trans="device_information"></h6>
                    </div>
                    <div class="col-6 text-right" style="white-space: nowrap;">
                        <a href="#network_info" data-trans="more_detail">
                        </a>
                    </div>
                </div>
                <div class="bottom_right">
                    <div id="31" class="row col-md-12 col-lg-12" style="font-size:14px;">
                        <div class="row">
                            <div class="top_data_1 col-6">
                                <label data-trans="network_provider"></label>
                            </div>
                            <div class="col-6">
                                <label data-bind="text: networkOperator"></label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="top_data_1 col-6 col-md-6 col-xl-6"">
                                <label>ICCID</label>
                            </div>
                            <div class="col-6 col-md-6 col-xl-6">
                                <label data-bind="text: iccid"></label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="top_data_1 col-6 col-md-6 col-xl-6">
                                <label data-trans="imei"></label>
                            </div>
                            <div class=" col-6 col-md-6 col-xl-6">
                                <label data-bind="text: imei"></label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="top_data_1 col-6 col-md-6 col-xl-6">
                                <label data-trans="imsi"></label>
                            </div>
                            <div class=" col-6 col-md-6 col-xl-6">
                                <label data-bind="text: imsi"></label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="top_data_1 col-6 col-md-6 col-xl-6">
                                <label data-trans="signal_strength_label"></label>
                            </div>
                            <div class="col-6 col-md-6 col-xl-6">
                                <label id="fresh_signal_strength"></label>
                            </div>
                        </div>
                    </div>
                    <div id="32"  class="row col-md-12 col-lg-12" style="padding-right:0px;">
                        <div class="row margin-top-10">
                            <div class="col-6 col-sm-4 text-center" id="h_qrcode_dhcp" data-bind="visible: showQrCode()&&(wifi_enable() == 'chip1'||wifi_enable() == 'chip2')">
                                <div>
                                    <img src="./img/blacktrans.png?v=1736213398713" width="111" id="qrcode_img_dhcp" data-bind="attr: {src: qrcodeSrc}" />
                                </div>
                                <div>
                                    <span class="center-block margin-top-5" data-trans="wifi" data-bind="visible: !bandSteeringEnabled()"></span>
                                    <span class="center-block margin-top-5" data-trans="wifi" data-bind="visible: bandSteeringEnabled()"></span>
                                </div>
                            </div>
                            
                            <div class="col-6 col-sm-4 text-center" data-bind="visible: isSupportSmartLife">
                                <div style="margin-top: 8px; margin-bottom: 8px;">
                                    <img src="./img/appqr.png?v=1736213398713" width="95"/>
                                </div>
                                <div>
                                    <span class="center-block margin-top-5" data-trans="applet_title"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>